<template>
  <div class="userInfo">
    <sub-nav-bar title="我的资料" path="/home/user"></sub-nav-bar>
    <div class="content">
      <!-- 头像 -->
      <user-cell
        class="mt20"
        title="头像"
        :value="userInfo.avatar"
        @click="goEditInfo('avatar')"
        type="img"
      ></user-cell>
      <!-- 昵称 -->
      <user-cell
        class="mt20"
        title="昵称"
        :value="userInfo.nickname"
        @click="goEditInfo('nickname')"
      ></user-cell>
      <!-- 性别 -->
      <user-cell
        title="性别"
        :value="genderObj[userInfo.gender]"
        @click="showGender = true"
      ></user-cell>
      <!-- 地区 -->
      <user-cell
        title="地区"
        :value="area.city_list[userInfo.area]"
        @click="showArea = true"
      ></user-cell>
      <!-- 个人简介 -->
      <user-cell
        title="个人简介"
        :value="userInfo.intro"
        @click="goEditInfo('intro')"
      ></user-cell>
      <!-- 退出 -->
      <van-button block class="btn mt20" @click="exitBtn"
        ><span class="red">退出登录</span></van-button
      >
    </div>
    <!--
      性别选择
      showGender = false 关闭弹出层
    -->
    <van-popup v-model="showGender" position="bottom" @closed="genderEvent">
      <van-picker
        v-if="bol"
        title="性别选择"
        show-toolbar
        :default-index="userInfo.gender"
        :columns="Object.values(genderObj)"
        @confirm="genderConfirm"
        @cancel="showGender = false"
      ></van-picker>
    </van-popup>
    <!-- 城市选择 -->
    <van-popup v-model="showArea" position="bottom">
      <van-area
        v-if="bol"
        title="城市选择"
        :area-list="area"
        :value="userInfo.area"
        :columns-num="2"
        @confirm="areaConfirm"
        @cancel="showArea = false"
      ></van-area>
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import userCell from './userCell.vue'
import areaData from '@/assets/js/area.js'
import { removeToken } from '@/utils/local.js'
import { auEdit } from '@/api/userInfo.js'
export default {
  name: 'userInfo',
  data () {
    return {
      area: areaData,
      // 性别选择弹窗
      showGender: false,
      // 城市选择弹窗
      showArea: false,
      // 静默刷新默认值
      bol: true,
      genderObj: {
        0: '保密',
        1: '男',
        2: '女'
      }
    }
  },
  methods: {
    // 退出登录
    exitBtn () {
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '确定要退出吗?'
        })
        .then(() => {
          // 点击了确认
          this.$toast.success('退出成功')
          // 删除token
          removeToken()
          // 登录状态为false
          this.$store.commit('setLoginState', false)
          // 跳转到登录页面
          this.$router.push('/login')
        })
        .catch(() => {
          // 点击了取消
        })
    },
    // 性别选择
    async genderConfirm (value, index) {
      // window.console.log(value, index)
      // 关闭弹窗
      this.showGender = false
      // 提示加载中
      // this.$toast.loading({
      //   message: '加载中',
      //   duration: 0
      // })
      // 调用编辑api并传参
      // const res = await auEdit({
      //   gender: index
      // })
      this.auEditInfo({
        gender: index
      })
      // 修改成功提示
      // this.$toast.success('修改成功')
      // 重新请求获取用户信息更新到vuex
      // action完成了这一步，这里只是调用
      // this.$store.dispatch('refresUserInfo')
      // window.console.log(res)
    },
    // 城市选择
    async areaConfirm (value, index) {
      // window.console.log(value, index)
      // 关闭弹出层
      this.showArea = false
      // // 提示加载中
      // this.$toast.loading({
      //   message: '加载中',
      //   duration: 0
      // })
      // 调用编辑api并传参
      // const res = await auEdit({
      //   area: value[1].code
      // })
      // 成功提示
      // this.$toast.success('修改成功')
      // 重新请求获取用户信息更新到vuex
      // action完成了这一步，这里只是调用
      // this.$store.dispatch('refresUserInfo')
      this.auEditInfo({
        area: value[1].code
      })
      // window.console.log(res)
    },
    // 封装一个修改用户性别和地区的方法
    async auEditInfo (data) {
      this.$toast.loading({
        message: '加载中',
        duration: 0
      })
      const res = await auEdit(data)
      // 成功提示
      this.$toast.success('修改成功')
      // 重新请求获取用户信息更新到vuex
      // action完成了这一步，这里只是调用
      this.$store.dispatch('refresUserInfo')
      window.console.log(res)
    },
    // 跳转到上传图片组件
    goEditInfo (str) {
      // 路由传值  1:传  this.$router.push("/xxx?参数名=值") 2:收  组件内 this.$route.query.参数名
      this.$router.push('/home/editInfo?type=' + str)
    },
    // 性别的静默刷新
    genderEvent () {
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    }
  },
  watch: {
    showArea (newValue) {
      if (newValue === false) {
        this.bol = false
        this.$nextTick(() => {
          this.bol = true
        })
      }
    }
  },
  components: { userCell },
  computed: {
    ...mapState(['userInfo'])
  },
  mounted () {
    document.body.style.backgroundColor = '#f7f4f5'
    // window.console.log(this.userInfo)
  },
  beforeDestroy () {
    document.body.style.backgroundColor = '#fff'
  }
}
</script>

<style lang="less" scoped>
.userInfo {
  .content {
    padding: 0px @p15;
    .mt20 {
      margin-top: 20px;
    }
    .btn {
      background-color: #fff;
      .red {
        color: red;
      }
    }
  }
}
</style>
